<template>
    <div class="size">
        <el-input @change="handlerUpdate" v-model="width" />
        <span class="item">*</span>
        <el-input @change="handlerUpdate" v-model="height" />
        <span class="item">*</span>
        <el-input @change="handlerUpdate" v-model="length" />
    </div>
  </template>
  <script setup>
  import { watch, ref } from 'vue';

  const props = defineProps({
    modelValue: {
      type: String,
      default: "",
    },
  });

  const width = ref('');
  const height = ref('');
  const length = ref('');
  const localVal = ref('');

  const emit = defineEmits(['update:modelValue']);

  const handlerUpdate = () => {
    let value = width.value;
    if (height.value) {
      if (value) {
        value = value + '*' + height.value;
      } else {
        value = height.value;
      }
    }

    if (length.value) {
      if (value) {
        value = value + '*' + length.value;
      } else {
        value = length.value;
      }
    }
    localVal.value = value;
    emit('update:modelValue', localVal.value);
  };
  
  // 监听 value 属性变化
  watch(() => props.modelValue, (newValue, oldValue) => {
    if (newValue && newValue !== localVal.value) {
        localVal.value = newValue;
        const list = newValue.split('*');
        width.value = list[0] || '';
        height.value = list[1] || '';
        length.value = list[2] || '';
    }
  }, {
    immediate: true
  });
  </script>
  <style scoped lang="scss" >
  .size {
    display: flex;
  }

  .item {
    margin: 0 4px;
    font-size: 20px;
    color: #353535;
    line-height: 30px;
  }
  </style>